<template>
	<view class="content">
		<view class="swiper-box" id="swiper">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper, index) in img" :key="index">
					<image :src="swiper" mode="aspectFit" />
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{img.length }}</view>
		</view>
		<view class="spms">
			<view class="price">
				<view class="" style="display: flex;align-items: flex-end;">
					<view class="xprice">
						<text style="font-size: 28rpx;">￥</text><text>{{proinfo.price}}</text>
					</view>
					<text style="font-size: 22rpx;color: #999999;margin-left: 7rpx;">起拍价</text>
				</view>
				<!-- <view class="jfbox" v-if="title=='兑换商品详情'">
					{{proinfo.price*100}}积分
				</view> -->
				<view class="jfbox">
					<u-count-down ref="countDown" :time="proinfo.time" format="HH:mm:ss" @change="changetime"></u-count-down>
				</view>
			</view>
			<view class="name">
				{{proinfo.name}}
			</view>
			<view class="tagsbox">
				<view class="tags">
					库存{{proinfo.num}}件
				</view>
				
			</view>
			<!-- <view class="item_box flex" @click="show=true">
				<view class="left flex">
					<view class="label">
						选择
					</view>
					<view class="line">

					</view>
					<view class="label_name" v-if="!ggcuri">
						选择商品规格
					</view>
					<view class="label_name" v-else>
						{{gglist[ggcuri].text}}
					</view>
				</view>
				<view class="right">
					<image class="right_icon" src="./static/more.png" mode=""></image>
				</view>
			</view> -->
			<view class="item_box flex">
				<view class="left flex">
					<view class="label">
						发货
					</view>
					<view class="line">

					</view>
					<view class="label_name">
						{{proinfo.send_address}}
					</view>
				</view>
				<view class="right">
					出价者{{usertotal}}
				</view>
			</view>
		</view>

		<view class="contline">

		</view>
		<!-- 竞拍者 -->
		<view class="jpr">
			<view class="jplabel u-flex u-flex-y-center u-flex-between">
				竞拍者


				<view class="u-flex u-flex-y-center jplabelr" @click="go('/pages/jp/userlist?id='+proinfo.id)">
					全部
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="">
				<view class="jpitem u-flex u-flex-y-center u-flex-between" v-for="(item,index) in userlist" :key="index"
					v-if="index<=1">
					<view class="u-flex u-flex-y-center">
						<image :src="item.avatar" mode="aspectFill" class="jptx"></image>
						<view class="jprl">
							<view class="jpname">
								{{item.username}}
							</view>
							<view class="jptime">
								{{item.createtime}}
							</view>
						</view>
					</view>
					<view class="jpprice">
						￥{{item.price}}
					</view>
				</view>
			</view>
		</view>

		<view class="contline">

		</view>
		<view class="pro_info">
			<view class="info_title">
				<image style="width: 178rpx;position: absolute;" src="./static/bg.png" mode="widthFix"></image>
				<image style="width: 117rpx;" src="./static/titlebg.png" mode="widthFix"></image>
			</view>
			{{proinfo.desc}}
			<view class="">
				<view class="" style="width: 750rpx;" v-for="(item,index) in imglist" :key="index">
					<image style="width: 100%;" mode="widthFix" @click="prepic(index)" :src="item"></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<!-- <view class="footer_left" @click="clickto('/pages/product/smart')">
				<image class="sj_icon" src="./static/smart.png" mode=""></image>
				<view class="">
					商家
				</view>
			</view> -->

			<view class="footer_right1" @click="buy" v-if="isfinish">
				立即出价
			</view>
			<view class="" v-if="userlist.length>0">
				<view class="footer_right1" @click="gobuy" v-if='!isfinish&&(userlist[0].username==username)'>
					你已拍得，请尽快支付
				</view>
			</view>
		</view>


		<!-- 弹框 -->
		<!-- <u-popup :show="show" round='30rpx' closeOnClickOverlay @close="show=false">
			<view class="popbox">
				<image class="cha_icon" src="./static/cha.png" @click="show=false" mode=""></image>
				<view class="sptop">
					<image class="propic" :src="ggcuri!=null?gglist[ggcuri].image:img[0]" mode="aspectFill"></image>
					<view class="poptopright">
						<view class="popprice">
							<image v-if="title=='兑换商品详情'" style="width: 22rpx;height: 22rpx;" src="./static/jf.png"
								mode=""></image>
							<text v-if="title=='商品详情'"
								style="font-size: 28rpx;">￥</text>{{ggcuri!=null?gglist[ggcuri].price:proinfo.price}}
						</view>
						<view class="popname">
							{{ggcuri!=null?gglist[ggcuri].text:proinfo.name}}
						</view>
					</view>
				</view>
				<view class="popgg">
					<view class="ggtitle">
						规格分类({{gglist.length}})
					</view>
					<scroll-view scroll-x="true" style="width: 689rpx;">
						<view class="ggbox">
							<view class="ggitem" :class="ggcuri==index?'active':''" @click="checkgg(item,index)"
								v-for="(item,index) in gglist" :key="index">
								<image class="ggpic" :src="item.image" mode="aspectFill"></image>
								<view class="ggname">
									{{item.text}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="numbox">
					
				</view>
				<view class="popbtn" @click="submit">
					立即出价
				</view>

			</view>
		</u-popup> -->


		<u-modal :show="showcj" title="请输入价格" @confirm="confirm" @close="showcj=false" closeOnClickOverlay>
			<u--input placeholder="请输入您的出价" border="surround" v-model="value" type='number'></u--input>
		</u-modal>
	</view>
</template>

<script>
	import {
		getAuctionGoodDetail,
		getgoodsSpec,
		auctionGood,
		getAuctionUserGoodsList
	} from '@/api/product.js'
	import {
		addShopcar
	} from '@/api/home.js'
	export default {
		data() {
			return {
				showcj: false,
				value: '',
				gglist: [],
				num: 1,
				show: false,
				id: "",
				proinfo: {},
				marginTop: 0,
				ggcuri: null,
				ggid: '',
				poptype: '',
				popbtn: '',
				type: '',
				imglist: [],
				currentSwiper: 0, // 轮播图右下角数字
				img: [],
				title: '',
				userlist: [],
				usertotal: 0,
				isfinish:true,
				username:''
			};
		},
		methods: {
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			submit(i) {
				let nowTime=new Date()
				let endTime=new Date(this.proinfo.auction_end_time)
				let time=endTime - nowTime
				if(time<0){
					this.$u.toast('竞拍已结束,不能出价！')
					return
				}
				if (!this.ggid) {
					uni.showToast({
						title: '请选择商品规格',
						icon: 'none'
					})
					return
				}
				this.show = false
				this.showcj = true
			},
			// 图片预览
			pre(url) {
				// console.log(url)
				uni.previewImage({
					urls: [url],
				});
			},
			prepic(index) {
				uni.previewImage({
					current: index,
					urls: this.imglist,
				});
			},
			clickto(url) {
				// console.log(this.ggid)
				uni.$u.route(url, {
					id: this.id,
					price:this.userlist[0].price
				})
			},
			go(url) {
				uni.navigateTo({
					url
				})
			},
			getProdetail() {
				getAuctionGoodDetail({
					id: this.id
				}).then(res => {
					console.log(res)
					// this.$refs.countDown.start();
					this.proinfo = res.data.data.list
					this.proinfo.images.split(',').map(t => {
						this.img.push(this.$BASE_URL + t)
					})
					let nowTime = new Date()
					let endTime = new Date(this.proinfo.auction_end_time)
					this.proinfo.time = endTime.getTime() - nowTime.getTime()
					// this.$refs.countDown.start();
					// console.log(this.proinfo.time)
					this.imglist.push(this.$BASE_URL + this.proinfo.image)
					this.share.title = this.proinfo.name
					this.gglist = res.data.data.spec
					this.gglist.map(t => {
						// this.img.push(this.$BASE_URL + t)
						t.image = this.$BASE_URL + t.image
						t.text = t.name
					})
					this.getuserlist()
					// 获取规格列表
					// getgoodsSpec({
					// 	goods_id: this.id
					// }).then(res => {
					// 	this.gglist = res.data.data
					// })
				})
			},
			getuserlist() {
				getAuctionUserGoodsList({
					id: this.id
				}).then(res => {
					this.userlist = res.data.data.data
					// console.log(this.userlist)
					this.usertotal = res.data.data.total
				})
			},
			// 选择规格
			checkgg(i, t) {
				this.ggcuri = t
				this.ggid = this.gglist[t].id
				// console.log(this.ggcuri)
			},
			// 加购物车
			addshopcar() {
				this.show = true
				this.popbtn = '确定'
				this.poptype = 'shopcar'

			},
			buy() {
				// console.log(this.isfinish)
				// 判断倒计时是否结束
				let nowTime=new Date()
				let endTime=new Date(this.proinfo.auction_end_time)
				let time=endTime - nowTime
				if(time<0){
					this.$u.toast('竞拍已结束,不能出价！')
					return
				}
				// this.show = true
				this.showcj=true
			},
			gobuy(){
				this.clickto('/pages/jp/ordersure')
			},
			minus() { //减数量
				if (this.num > 1) {
					this.num--
				}
			},
			plus() { //加数量
				this.num++
			},
			confirm() {
				let user_id = uni.getStorageSync('userinfo').id
				if (!this.value) {
					this.$u.toast('请输入您的出价')
					return
				}
				let lowprice = 0
				// 判断是否有出价人 
				if (this.usertotal > 0) { //有出价,最低出价为当前出价最高者
					lowprice = this.userlist[0].price
				} else { //无出价人，按商品最低出价
					lowprice = this.proinfo.price
				}
				console.log(this.value>lowprice)
				if(this.value<lowprice&&this.value==lowprice){
					this.$u.toast('出价不能小于'+lowprice)
					return
				}
				auctionGood({
					user_id,
					price: this.value,
					auction_good_id: this.id
				}).then(res => {
					this.getuserlist()
					this.$u.toast('竞拍成功')
					this.showcj = false
				})
			},
			changetime(e){
				
				if(e.days==0&&e.hours==0&&e.milliseconds==0&&e.minutes==0&&e.seconds==0){
					
					this.isfinish=false
				}else{
					this.isfinish=true
				}
			}
		},
		onLoad: function(option) {
			this.username=uni.getStorageSync('userinfo').username
			this.title = decodeURI(option.title)
			uni.setNavigationBarTitle({
				title: '商品详情'
			})
			this.id = option.id
			this.marginTop = 44 + uni.getStorageSync('statusBarHeight')
			this.type = option.type
		},
		mounted() {
			this.getProdetail()
		}
	}
</script>

<style lang="less">
	.content {

		padding-bottom: 149rpx;

		.pro_pic {
			width: 750rpx;
			height: 795rpx;
		}

		.spms {
			padding: 24rpx 30rpx 24rpx 24rpx;

			.price {
				display: flex;
				justify-content: space-between;

				.jfbox {
					line-height: 41rpx;
					height: 41rpx;
					background: linear-gradient(142deg, rgba(255, 160, 8, .2), rgba(255, 131, 5, .2));
					// opacity: 0.2;
					border-radius: 21rpx;
					padding: 0 18rpx;
					color: #FF5F00;
					font-size: 27rpx;
					font-style: italic;
				}

				.xprice {
					color: #FF4E31;
					font-size: 42rpx;
					font-weight: bold;
					line-height: 32rpx;
				}

				.yprice {
					font-size: 24rpx;
					color: #999999;
					text-decoration: line-through;
					padding-top: 16rpx;
					margin-left: 17rpx;
					line-height: 32rpx;
				}
			}
		}

		.name {
			color: #333333;
			font-size: 33rpx;
			font-weight: bold;
			margin-top: 24rpx;
		}

		.tagsbox {
			display: flex;
			align-items: center;

			.tags {
				padding: 0 14rpx;
				line-height: 36rpx;
				border: 1rpx solid rgba(255, 113, 90, .3);
				border-radius: 18rpx;
				font-size: 20rpx;
				color: #FF4E31;
				margin-right: 10rpx;
				margin-top: 20rpx;
			}
		}

		.item_box {
			justify-content: space-between;
			margin-top: 36rpx;
			margin-bottom: 18rpx;

			.right_icon {
				width: 13rpx;
				height: 22rpx;
			}

			.label {
				color: #9C9C9C;
				font-size: 28rpx;

			}

			.label_name {
				color: #333333;
				font-size: 28rpx;
			}

			.line {
				width: 3rpx;
				height: 23rpx;
				background: #ECEBEA;
				margin: 0 21rpx 0 18rpx;
			}

			.right {
				color: #9C9C9C;
				font-size: 28rpx;
			}
		}
	}

	.contline {
		width: 750rpx;
		height: 19rpx;
		background: #F7F6F6;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.pro_info {
		.info_title {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 35rpx 0 30rpx;
			position: relative;
		}

		.bg_icon {
			width: 19rpx;
			height: 10rpx;
		}
	}

	.footer {
		width: calc(750rpx - 73rpx);
		height: 149rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 33rpx 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.footer_left {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #686868;
			font-size: 22rpx;

			.sj_icon {
				width: 37rpx;
				height: 36rpx;
				margin-bottom: 12rpx;
			}
		}

		.footer_right {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			line-height: 93rpx;

			.btnleft {
				width: 303rpx;
				background: #FF9107;
				border-radius: 47rpx 0px 0px 47rpx;
			}

			.btnright {
				width: 303rpx;
				background: #F6570A;
				border-radius: 0px 47rpx 47rpx 0px;
				margin-left: 1rpx;
			}
		}

		.footer_right1 {
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			line-height: 93rpx;

			background: #F6570A;
			width: 606rpx;
			border-radius: 47rpx;
		}
	}

	.popbox {
		padding: 47rpx 34rpx 40rpx 25rpx;
		position: relative;

		.cha_icon {
			position: absolute;
			width: 20rpx;
			height: 20rpx;
			top: 48rpx;
			right: 34rpx;
		}

		.sptop {
			display: flex;
			align-items: center;
			margin-bottom: 76rpx;

			.propic {
				width: 115rpx;
				height: 115rpx;
				border-radius: 10rpx;
				margin-right: 23rpx;
			}

			.popprice {
				color: #FF4E31;
				font-size: 42rpx;
				font-weight: bold;
			}

			.popname {
				color: #333;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
		}

		.ggtitle {
			color: #000000;
			font-size: 30rpx;
			margin-bottom: 22rpx;

		}

		.ggbox {
			display: flex;
			align-items: center;

			.ggitem {
				border-radius: 10rpx;
				// border: 1rpx solid #FF4E31;
				margin-right: 15rpx;
				overflow: hidden;

				.ggpic {
					width: 219rpx;
					height: 208rpx;
				}

				.ggname {
					background-color: #F5F5F5;
					line-height: 56rpx;
					text-align: center;
					font-size: 22rpx;
					color: #333;
					margin-top: -3px;
					border-radius: 0px 0px 10rpx 10rpx;
				}
			}

			.active {

				border: 2rpx solid #FF4E31;
			}
		}

		.popbtn {
			width: 687rpx;
			line-height: 114rpx;
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			border-radius: 57rpx;
			font-size: 36rpx;
			color: #fff;
			text-align: center;
		}

		.numbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 55rpx;
			padding-left: 4rpx;
			margin-top: 80rpx;

			.numleft {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			.minus {
				width: 51rpx;
				height: 52rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 1rpx solid #DFDFDF;

				.jian {
					width: 14rpx;
					height: 2rpx;
				}
			}

			.plus {
				width: 51rpx;
				height: 52rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-left: 1rpx solid #DFDFDF;

				.jia {
					width: 16rpx;
					height: 16rpx;
				}
			}

			.u-number-box {
				border-radius: 10rpx;

				border: 1rpx solid #DFDFDF;
			}
		}
	}

	.swiper-box {
		position: relative;
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper {
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper swiper-item image {
		width: 100%;
		height: 100vw;
	}

	.swiper-box .indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.jpr {
		padding: 34rpx 30rpx 0;

		.jplabel {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #333333;
			line-height: 30rpx;
			margin-bottom: 10rpx;

			.jplabelr {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 30rpx;
			}
		}
	}

	.jpitem {
		padding: 26rpx 0 18rpx;
		border-bottom: 2rpx solid #F9F8F8;

		.jptx {
			width: 105rpx;
			height: 106rpx;
			border-radius: 50%;
		}

		.jprl {
			padding: 18rpx;
			height: 70rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.jpname {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 28rpx;
		}

		.jptime {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 24rpx;
		}

		.jpprice {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #F6570A;
		}
	}
</style>